<template>
  <div class="node-wrapper">
    <!-- 路由 -->
    <BranchNode v-if="node.type === 4" :node="node" :prevId="node.nodeId" />
    <template v-else>
      <!-- 审核 || 抄送 -->
      <div v-if="node.type === 1 || node.type === 2" class="arrow"></div>
      <div class="node-wrap-box">
        <!-- 标题 -->
        <div class="title" :class="'type-' + node.type">
          <template v-if="node.type === 0">
            <div class="row">
              <i class="icon iconfont">&#xe7d0;</i>
              <div class="text">{{ node.name }}</div>
            </div>
          </template>
          <template v-else>
            <div class="row">
              <i class="icon iconfont" v-if="node.type === 1">&#xe65e;</i>
              <i class="icon iconfont" v-if="node.type === 2">&#xe65d;</i>
              <i class="icon iconfont" v-if="node.type === 3">&#xe70f;</i>
              <input v-focus v-if="isEdit" v-model="title" type="text" @blur="changeTitle" />
              <div v-else class="text editabled" @click="editTitle">{{ node.name }}</div>
            </div>
            <i class="icon iconfont icon-close" @click="remove">&#xe658;</i>
          </template>
        </div>
        <!-- 内容 -->
        <div class="content" @click="edit">
          <!-- 发起人 -->
          <InitiatorNode v-if="node.type === 0" :actioners="node.properties.actioners" />
          <!-- 审批人 -->
          <AuditNode v-if="node.type === 1" :properties="node.properties" />
          <!-- 抄送人 -->
          <DeliveryNode v-if="node.type === 2" :properties="node.properties" />
          <!-- 条件 -->
          <ConditionNode v-if="node.type === 3" :conditions="node.properties.conditions" />
          <i class="icon iconfont content-arrow">&#xe6e9;</i>
        </div>
        <div class="node-id">ID：{{ node.nodeId }}</div>
      </div>
    </template>
    <AddNode :prevId="node.nodeId"></AddNode>
    <NodeItem v-if="node.childNode" :node="node.childNode"></NodeItem>
  </div>
</template>

<script setup lang="ts">
import type { NodeItem } from '../types'
const props = defineProps({
  node: {
    type: Object as () => NodeItem,
    default: () => {
      return {
        type: 0,
        name: '',
        nodeId: '',
        properties: {
          actioners: []
        },
        childNode: null
      }
    }
  }
})
const { editNode, removeNode } = inject<{
  editNode: (node: NodeItem) => void
  removeNode: (node: NodeItem) => void
}>('flowTree', {
  editNode: () => {},
  removeNode: () => {}
})
const { openDrawer } = inject<{ openDrawer: (node: NodeItem) => void }>('drawer', {
  openDrawer: () => {}
})
const isEdit = ref<boolean>(false)
const title = ref<string>('')
const editTitle = () => {
  title.value = props.node.name
  isEdit.value = true
}
const changeTitle = () => {
  editNode({
    ...props.node,
    name: title.value
  })
  title.value = ''
  isEdit.value = false
}
const edit = () => {
  openDrawer(props.node)
}
const remove = () => {
  removeNode(props.node)
}
</script>
